<template>


  <el-dialog v-model="dialogFormVisible" title="添加活动">
    <el-form :model="form">
      <el-form-item label="活动标题">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      
        
        <!-- 时间输入框 -->
          <el-form-item label="开始时间">
      <el-col :span="11">
        <el-date-picker
          v-model="sizeForm.date1"
          type="date"
          label="Pick a date"
          placeholder="Pick a date"
          style="width: 100%"
        />
      </el-col>
    </el-form-item>
    <!-- 第二个输入框 -->
    <el-form-item label="结束时间">
      <el-col :span="11">
        <el-date-picker
          v-model="sizeForm.date1"
          type="date"
          label="Pick a date"
          placeholder="Pick a date"
          style="width: 100%"
        />
      </el-col>
    </el-form-item>
    <!-- 复选框 -->
    <el-form-item label="上线/下线">
        <el-checkbox-group v-model="checkList">
    <el-checkbox label="上线" />
    <el-checkbox label="下线" />
  </el-checkbox-group>
    </el-form-item>
   
       
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >Confirm</el-button
        >
      </span>
    </template>
  </el-dialog>

</template>
    
<script setup lang='ts'>
import { reactive, ref, toRaw, toRefs } from 'vue'

// 父传子接受
const props = defineProps<{
    dialogFormVi:boolean
}>();
console.log(props);

const dialogFormVisible =props.dialogFormVi




  const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
    })
// 时间输入框
const sizeForm = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})
// 复选框
const checkList = ref(['selected and disabled', 'Option A'])
</script>
    
<style>
    .el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
.el-dialog__body{
   padding-left: 140px;
}

</style>